<template>
  <view class="order-list">
    <!-- 订单列表 -->
    <view class="order-item">
      <view class="order-header">
        <!-- 右侧元素容器 -->
        <view class="header-right">
          <text class="value status" :class="[
            'status-badge',
            { 'status-pending': order.status === 'pending' || order.status == 0 },
            { 'status-completed': order.status === 'completed' || order.status == 1 },
            { 'status-cancelled': order.status === 'cancelled' || order.status == 3 }
          ]">{{ order.status_dec }}</text>

          <!-- 删除图标按钮 -->
          <view v-if="order.status != 0" class="del-icon" @click="handleDelOrder(order)">
            <u-icon name="trash" color="#ff3b30" size="42"></u-icon>
          </view>
        </view>

        <view class="info-row">
          <text class="label">流水编号：</text>
          <text class="value">{{ order.sn }}</text>
        </view>
      </view>
      <view class="order-body">
        <view class="info-row" v-if="order.order_sn">
          <text class="label">订单编号：</text>
          <text class="value">{{ order.order_sn }}</text>
        </view>
        <view class="info-row">
          <text class="label">订单金额：</text>
          <text class="value large-text">{{ order.order_amount }}</text>
        </view>
        <view class="info-row">
          <text class="label fixed-width">金豆：</text>
          <text class="value large-text">{{ order.amount }}</text>
        </view>
        <view class="info-row">
          <text class="label">加入时间：</text>
          <text class="value">{{ order.create_time }}</text>
        </view>
        <view class="info-row">
          <text class="label">更新时间：</text>
          <text class="value">{{ order.update_time }}</text>
        </view>
      </view>
      <view class="order-footer">
        <view class="action-buttons" v-if="order.status == 0">
          <button class="cancel-button" @click="handleCancelOrder(order)" style="display: none;">
            <text class="btn-text">取消队列</text>
          </button>
          <button class="redeem-button" @click="handleRedeemPoints(order)">
            <text class="btn-text">兑换积分</text>
          </button>
          <button class="redeem-button double-btn" @click="handleDoublePoints(order)">
            <text class="btn-text">兑换云购权益</text>
          </button>
        </view>
      </view>
    </view>
    <!-- 协议说明 -->
    <u-popup v-model="show" mode="center">
      <view class="container">
        <scroll-view scroll-y="true" style="height: 500rpx; border: 1rpx solid #eee;">
          <view v-html="agreement" class="agreement"></view>
        </scroll-view>
        <view class="txt1">本次金豆数值：{{amount}}</view>
        <view class="txt2">本次兑换后积分数值：{{award_ticket}}</view>
        <view class="checkbox-box">
          <u-checkbox @change="checkboxChange" v-model="ischecked" active-color="#2979FF">是否同意该协议</u-checkbox>
        </view>
        <view class="line"></view>
        <view class="btn-box">
          <view class="cancle-btn" @click="handleCancleBtn">取消</view>
          <view class="exchange-btn" @click="handleExchange">确认兑换</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getAward, cancelTicketQueue } from "@/api/user"
export default {
  name: "queuCell",
  props: {
    order: {
      type: Object | Array,
    }
  },
  data() {
    return {
      show: false,
      ischecked: false,
      value: null,
      type: 'number',
      border: true,
      agreement: '',
      amount: 0,
      award_ticket: 0,
      tempId: null,
    };
  },
  methods: {
    handleCancleBtn() {
      this.show = false;
      this.ischecked = false;
    },
    checkboxChange() {

    },
    handleExchange() {
      console.log(this.ischecked);
      if (!this.ischecked) {
        uni.showToast({
          title: '请先勾选协议',
          icon: 'none' 
        }) 
        return;
      }
      cancelTicketQueue(this.tempId).then(res => {
        console.log(res);
        this.show = false;
        this.ischecked = false;
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        this.$emit('cancle-queue')
      })
    },
    handleCancelOrder(order) {
      uni.showModal({
        title: '提示',
        content: '确定要取消吗？',
        success: (res) => {
          if (res.confirm) {
            this.$emit('cancel-order', { 'order_id': order.id, 'type': 0 });
            // 调用取消订单接口
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    getStatusClass(status) {
      switch (status) {
        case 0:
          return 'pending';
        case 1:
          return 'completed';
        case 3:
          return 'cancelled';
        default:
          return '';
      }
    },

    handleRedeemPoints(order) {

      uni.showModal({
        title: '提示',
        content: `确定要兑换 ${order.amount} 积分吗？`,
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
            this.$emit('cancel-order', { 'order_id': order.id, 'type': 1 })
            // 调用兑付积分接口
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },

    handleDoublePoints(order) {
      //待开发,等待领导说该功能启用
      console.log(order);
      let id = order.id;
      this.tempId = id;
      this.show = true;
      getAward(id).then(({data}) => {
        console.log(data);
        this.agreement = data.jindou_transfer_agreement;
        this.amount = data.amount;
        this.award_ticket = data.award_ticket;
      })
    },
    handleDelOrder(order) {
      uni.showModal({
        title: '提示',
        content: `确定要删除吗？`,
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
            this.$emit('redeem-points', { 'order_id': order.id, 'type': 2 })
            // 调用兑付积分接口
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    }
  },
  computed: {

  }
};
</script>

<style scoped>
.order-list {
  /* background-color: #f8f9fe; */
  padding: 0 20rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.order-item {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 20rpx;
  margin-bottom: 0;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid rgba(245, 245, 245, 0.8);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.order-item:hover {
  transform: translateY(-5rpx);
  box-shadow: 0 15rpx 35rpx rgba(0, 0, 0, 0.1);
}

.order-header {
  position: relative;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
}

/* 右侧元素容器 */
.header-right {
  position: absolute;
  top: 10rpx;
  right: 20rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.label {
  font-size: 28rpx;
  color: #9da3b4;
  min-width: 160rpx;
}

.value {
  font-size: 28rpx;
  color: #5a6482;
  font-weight: 500;
}

.large-text {
  font-size: 36rpx;
  font-weight: bold;
  background: linear-gradient(45deg, rgb(253, 80, 47), rgb(255, 140, 80));
  -webkit-background-clip: text;
  color: transparent;
}

/* 状态标签样式 */
.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  color: #fff;
  font-size: 24rpx;
  font-weight: 500;
  letter-spacing: 1rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
}

.status-pending {
  background: #ff9d4a;
  box-shadow: 0 4rpx 10rpx rgba(255, 157, 74, 0.3);
}

.status-completed {
  background: #34c759;
  box-shadow: 0 4rpx 10rpx rgba(52, 199, 89, 0.3);
}

.status-cancelled {
  background: #ff3b30;
  box-shadow: 0 4rpx 10rpx rgba(255, 59, 48, 0.3);
}

/* 删除图标样式 */
.del-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42rpx;
  height: 42rpx;
  cursor: pointer;
  transition: all 0.2s ease;
}

.del-icon:active {
  transform: scale(0.92);
  opacity: 0.8;
}

.order-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* margin-top: 20rpx; */
  border-top: 1rpx dashed rgba(255, 157, 74, 0.15);
  padding-top: 20rpx;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  justify-content: flex-end;
}

.cancel-button,
.redeem-button {
  padding: 0 20rpx;
  height: 60rpx;
  border: none;
  border-radius: 30rpx;
  font-size: 24rpx;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.double-btn {
 background: #2979FF!important; 
}
.btn-text {
  font-weight: 500;
  letter-spacing: 1rpx;
}

.cancel-button {
  background: linear-gradient(45deg, #ff3b30, #ff6b46);
  color: #fff;
  box-shadow: 0 10rpx 15rpx rgba(255, 59, 48, 0.2);
}

.cancel-button:active {
  transform: scale(0.96);
  box-shadow: 0 5rpx 10rpx rgba(255, 59, 48, 0.1);
}

.redeem-button {
  background: linear-gradient(45deg, #34c759, #32d74b);
  color: #fff;
  box-shadow: 0 10rpx 15rpx rgba(52, 199, 89, 0.2);
}

.redeem-button:active {
  transform: scale(0.96);
  box-shadow: 0 5rpx 10rpx rgba(52, 199, 89, 0.1);
}

.order-body {
  /* padding: 20rpx 0; */
}

.container {
  padding: 30rpx 30rpx 0 30rpx;
  width: 600rpx;
  background: #fff;
  border-radius: 10rpx;
}

.checkbox-box {
  color: #fff;
}

.title {
  font-size: 35rpx;
  text-align: center;
}

.exchange-btn {
  width: 300rpx;
  height: 80rpx;
  background-color: #2979FF;
  font-size: 32rpx;
  color: #fff;
  border-radius: 60rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 20rpx auto;
}

.cancle-btn {
  width: 200rpx;
  height: 80rpx;
  background-color: #eee;
  font-size: 32rpx;
  color: #fff;
  border-radius: 60rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 20rpx auto;
}
.txt1 {
  color: #2979FF;
  line-height: 60rpx;
}

.txt2 {
  color: #2979FF;
  line-height: 60rpx;
}

.btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.line {
  border-top: 1rpx solid #eee;
  margin-top: 20rpx;
}

.agreement {
  /* height: 600rpx; */
  /* overflow: auto; */
  line-height: 60rpx;
  
}

</style>